<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 总结: 前端声明处理数据的函数 同时创建script标签发送请求 后端直接返回该函数 -->
  用户名: <input type="text" id="username">
  <p></p>
  <script>
    const input = document.querySelector('input')
    const p = document.querySelector('p')

    // 声明handle函数
    function handle(data) {
      input.style.border = '1px solid #f00'
      p.innerHTML = data.msg
    }

    
    input.onblur = function () {
      let username = this.value
      //向服务端发送请求 检测用户名是否存在

      // 1.创建script标签
      const script = document.createElement('script')

      // 2.设置src
      script.src = 'http:127.0.0.1:9000/checkname'

      // 3.将script插入到文档中
      document.body.appendChild(script)

    }
  </script>
</body>
</html>